<template>
  <div>
    <div>axios请求默认的content-type是application/json，也就是java后端经常让你把参数放在body中的那种格式 传输的样式是 requestbody</div>
    <button @click="setPost">post请求，json格式</button>
    <div>如果需要传formdata类型的参数，则需要修改请求头的content-type，同时参数需要使用qs.stringify进行序列化</div>
    <button @click="setPost2">post请求，form-data格式</button>
    <div></div>
    <button @click="setPost3">post请求，字符串拼接到url后</button>
    <div> axios 不能通过 get 请求发送 json 数据,使用 postman 可以做到通过 get 请求发送 json 数据.但是通过 axios 框架就不行, 主要是因为axios是对ajax的一个封装。他本身不支持get请求在body体传参。
      原生和jquery的ajax是支持的。建议跟后端沟通，你把json拼在url后面，后端从url的queryString取值。或者使用post请求来传json数据</div>
    <button @click="setGet">get请求，字符串格式，默认会拼接到url后边</button>
  </div>

</template>

<script>
  import axios from 'axios'
  import qs from 'qs'
  export default {
    name: "editorPage",
    data() {
      return {
        params: {
          table_name:"person",fields:[{field_name:"name",field_value:"张三"}]
        },
        params2: {
          dataKey: 'key',
          filename: '测试',
          sql_str: 'select * from person'
        }
      }
    },
    methods: {
      setPost() {
        axios.post('http://49.233.23.77:8800/demo/db', this.params).then(res => {
          console.log('res', res)
        })
      },
      setPost2() {
        axios.post('http://49.233.23.77:8800/demo/dbsql', qs.stringify(this.params2), {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then(res => {
          console.log('res', res)
        })
      },
      setPost3() {
        axios.post('http://49.233.23.77:8800/demo/dbsql', this.params2, {// post的第二个参数也可以直接传null，此时就只有拼接了
          params: {
            id: 1
          }
        }).then(res => {
          console.log('res', res)
        })
      },
      setGet() {
        axios.get('http://49.233.23.77:8800/demo/dbsql', {
          params: this.params2,
          headers: { }// 注意get方法和post方法设置headers时是不一样的
        }).then(res => {
          console.log('res', res)
        })
      }
    }
  }
</script>

<style scoped>

</style>
